<template>
<div>
    <canvas id='canvas'></canvas>
    <!-- <div class="box7">
    <Button>buttonTEST</Button>
    </div> -->
    <div class="box8"></div>
    position:{{position}}
    record:{{record}}
    <div v-for="(item,index) in realInfo" 
        :key="index" 
        style="display:inline-block">
        <div v-for="(item,index) in item" :key=index>
            <div v-if="item==='1'">
                <square/>
            </div>
            <div v-else-if="item==='2'">
                <square2/>
            </div>     
        </div>
    </div>
    
</div>
</template>
<script>
import square from '@/components/square.vue'
import square2 from '@/components/squar2.vue'
export default {
    components:{
        square,square2
    },
    computed:{
        realInfo(){
            let info=this.mapInfo
            console.log('mapInfo',info)
            info[this.position.x][this.position.y]='2'
            console.log(info)
            return info
        }
    },
    watch:{
        position(val,oldVal){
            // console.log(val,oldval)
            this.realInfo[oldVal.x][oldVal.y]='1'
            this.realInfo[val.x][val.y]='2'
            console.log('watch',this.realInfo)
        }
    },
    data(){
        return {
            mapInfo:[
                ['1','1','1'],
                ['1','1','1'],
                ['1','1','1']
            ],
            position:{
          
                x:0,
                y:1
            },
            record:{
                x:0,
                y:0
            },
        }
    },
    mounted(){
        let canvas=document.getElementById('canvas')
        if(!canvas.getContext('2d')){
        }else{
            let ctx=canvas.getContext('2d')
            ctx.arc(20,20,10,0,Math.PI,false)
            ctx.stroke()
        }
        let _this=this
        setInterval(()=>{
            _this.$axios.post('app/api/position/newPosition',_this.record)
            .then((res) => {
                _this.record={x:0,y:0}
                console.log('所得返回坐标',res.data.position)
                _this.position=res.data.position
            }).catch((err) => {
                console.log(err)
            },1000);
        },5000)
        document.onkeydown=(e)=>{
            // console.log(e.key)
            // 每次案件成功都要进行即时的位移 并且将位移记录下来 
            let x=this.position.x
            let y=this.position.y
            
            switch(e.key){

                case('ArrowUp'):{
                    console.log('按了上');
                    if(y>0){
                        y--
                        this.record.y--
                    }
                    break
                };
                case('ArrowDown'):{
                    console.log('按了下')
                    if(y<2){ 
                        y++
                        this.record.y++                      
                    }
                    ;break
                };
                case('ArrowLeft'):{
                    console.log('按了左')
                    if(x>0){
                        x--
                        this.record.x--
                    }
                    ;break
                };
                case('ArrowRight'):{
                    console.log('按了右')
                    if(x<2){
                        x++;
                        this.record.x++
                    }
                    ;break
                };
            }
            this.position={
                x:x,y:y
            }
        }

    }
}
import axios from 'axios'
</script>
<style scoped>
    .box8{
        width: 100px;
        height: 100px;
        border: 1px solid black;
        /* -webkit-animation: mymove8 1s ease-in-out 1s alternate  forwards; */
 
        -webkit-animation: mymove8 1s linear infinite;
    }
    @keyframes mymove8{
        from{
        }
        to{
            -webkit-transform: rotateZ(360deg);
        }
    }
    .box7{
        display: inline-block;
        border: 1px solid black;
        margin: 0px;
        padding: 20px;
        border-radius: 5px;
        -webkit-animation: mymove6 1s infinite;
    }
    @-webkit-keyframes mymove6{
        from{
            margin: 0px;
            padding: 20px;
        }
        to{
            margin: 20px;
            padding: 0px;
        }
    }
</style>